<template>
  <div id="home">
    <Nav/>
    <Search class="mysearch" />
    <van-loading class="loading" type="spinner" color="#1989fa" v-if="isShow"></van-loading>
   <div class="home-content">
    <router-view></router-view>
    <van-loading class="loading" type="spinner" color="#1989fa" v-if="isShow"></van-loading>
   </div>
    <Footer class="myfooter" />
  </div>
</template>

<script>

import Nav from "./Nav.vue";
import Search from "./Search.vue";
import Footer from "./Footer.vue";
// import store from "../store/index";
export default {
  name: "Home",
  components: {
    Nav,
    Search,
    Footer,
  },computed:{
      isShow:function(){
        return this.$store.state.isLoading
      }
    },
};
</script>

<style scoped>
#home {
  width: 100%;
  height: 100%;
  /* background-color: #fff; */
}
.myfooter {
  position: fixed;
  bottom: 0;
  left: 0;
}
.mysearch {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
}
.home-content{
  height: calc(100% - 1.65rem);
  padding-bottom:.55rem;
  overflow-y: auto;
}
</style>
